<template>
  <div class="dashboard-container">
    <div>
      <el-dialog title="编辑教师" :visible.sync="dialogTeacherEditVisible" :close-on-click-modal="false">
        <el-form ref="teacherForm" :model="teacherEditForm" :rules="rules">
          <el-form-item label="姓名" prop="Name">
            <el-input v-model="teacherEditForm.Name" autocomplete="off" ></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="Phone">
            <el-input v-model="teacherEditForm.Phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="Email">
            <el-input v-model="teacherEditForm.Email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="职务" prop="Duty">
            <el-input v-model="teacherEditForm.Duty" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="教师编号" prop="Tno">
            <el-input v-model="teacherEditForm.Tno" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="Password">
            <el-input v-model="teacherEditForm.Password" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="handleEditCancel">取 消</el-button>
          <el-button type="primary" @click="handleEditConfirm">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="编辑管理员" :visible.sync="dialogManagerEditVisible" :close-on-click-modal="false">
        <el-form ref="managerForm" :model="managerEditForm" :rules="rules">
          <el-form-item label="姓名" prop="Name">
            <el-input v-model="managerEditForm.Name" autocomplete="off" ></el-input>
          </el-form-item>
          <el-form-item label="账号" prop="Account">
            <el-input v-model="managerEditForm.Account" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="Password">
            <el-input v-model="managerEditForm.Password" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="handleEditCancel">取 消</el-button>
          <el-button type="primary" @click="handleEditConfirm">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <div v-loading="tableLoading">
    <el-descriptions v-if="roles[0] == 'manager'" class="description" title="个人信息" :column="2" border>
        <template slot="extra">
          <el-button type="primary" @click="handleEditOpen">修改信息</el-button>
        </template>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            姓名
          </template>
          {{ managerData.Name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            账号
          </template>
          {{ managerData.Account }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-suitcase-1"></i>
            类型
          </template>
          管理员
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions v-else-if="roles[0] == 'teacher'" class="description" title="个人信息" :column="2" border>
        <template slot="extra">
          <el-button type="primary" @click="handleEditOpen">修改信息</el-button>
        </template>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            姓名
          </template>
          {{ teacherData.Name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            账号
          </template>
          {{ teacherData.Tno }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            学校
          </template>
          <el-tag v-if="teacherData.Org_name">{{ teacherData.Org_name.String }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            手机号码
          </template>
          {{ teacherData.Phone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-connection"></i>
            邮箱
          </template>
          {{ teacherData.Email }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-coordinate"></i>
            职务
          </template>
          {{ teacherData.Duty }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-suitcase-1"></i>
            类型
          </template>
          教师
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getInfo } from '@/api/user'
import { managerEdit } from '@/api/manager'
import { teacherEdit } from '@/api/teacher'
import { deepClone } from '@/utils/index'

export default {
  name: 'Dashboard',
  data() {
    return {
      tableLoading: true,
      teacherData: {},
      managerData: {},
      dialogTeacherEditVisible: false,
      dialogManagerEditVisible: false,
      rules: {
        Name: [
          { required: true, message: '请输入姓名' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符' }
        ],
        Account: [
          { required: true, message: '请输入账号' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符' }          
        ],
        Phone: [
          { required: true, message: '请输入手机号码' },
          { pattern: /^1[3|4|5|7|8|9][0-9]\d{8}$/, message: '请输入合法手机号码' }
        ],
        Email: [
          {  required: true, message: '请输入邮箱' },
          {  type: 'email', message: '请输入合法邮箱' }
        ],        
        Duty: [
          { required: true, message: '请输入职务' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符' }
        ],        
        Tno: [
          { required: true, message: '请输入教师编号' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符' }
        ],
        Password: [
          { min: 1, max: 20, message: '长度在 1 到 20 个字符' }          
        ]
      },
      teacherEditForm: {
        Id: '',
        Name: '',
        Phone: '',
        Email: '',
        Duty: '',
        Tno: '',
        Password: ''
      },
      managerEditForm: {
        Name: '',
        Account: ''
      }
    }
  },
  mounted() {
    getInfo().then(res => {
      if (res.data.Role === 'teacher') {
        this.teacherData = res.data
      } else if (res.data.Role === 'manager') {
        this.managerData= res.data
      }
      this.tableLoading = false
    }).catch(err => {
      this.tableLoading = false
    })
  },
  computed: {
    ...mapGetters([
      'name',
      'account',
      'roles',
      'org_id',
      'org_name'
    ]),
    role() {
      if (this.roles[0] === 'manager') {
        return '管理员'
      } else if (this.roles[0] === 'teacher') {
        return '教师'
      }
    }
  },
  methods: {
    handleEditOpen() {
      if (this.roles[0] === 'teacher') {
        this.teacherEditForm = deepClone(this.teacherData)
        this.dialogTeacherEditVisible = true
      } else if (this.roles[0] === 'manager') {
        this.managerEditForm = deepClone(this.managerData)
        this.dialogManagerEditVisible = true
      }
    },
    handleEditCancel() {
      if (this.roles[0] === 'teacher') {
        this.dialogTeacherEditVisible = false
      } else if (this.roles[0] === 'manager') {
        for (x in this.teacherData) {
          this.teacherData[x] = ''
        }
        this.dialogManagerEditVisible = false
      }
    },
    handleEditConfirm() {
      if (this.roles[0] === 'manager') {
        this.$refs.managerForm.validate(valid => {
          if (valid) {
            this.tableLoading = true
            managerEdit(this.managerEditForm).then(res => {
              this.managerData = res.data
              this.dialogManagerEditVisible = false
              this.tableLoading = false
              this.$store.dispatch('user/logout')
              this.$alert('信息已修改，请重新登录', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                  this.$router.push(`/login?redirect=${this.$route.fullPath}`)
                }
              })
            }).catch(err => {
              console.log(err)
              this.tableLoading = false
            })
          }
        }) 
      } else if (this.roles[0] === 'teacher') {
        this.$refs.teacherForm.validate(valid => {
          if (valid) {
            this.tableLoading = true
            teacherEdit(this.teacherEditForm).then(res => {
              this.teacherData = res.data
              this.dialogTeacherEditVisible = false
              this.tableLoading = false
              this.$store.dispatch('user/logout')
              this.$alert('信息已修改，请重新登录', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                  this.$router.push(`/login?redirect=${this.$route.fullPath}`)
                }
              })
            }).catch(err => {
              this.tableLoading = false
            })
          }
        })        
      }

    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 40px;
  }
  &-container .description {
    width: 1000px !important;
  }
}
</style>
